import 'package:flutter/material.dart';
import 'package:untitled9/airconditionomg_page.dart';

class HomePage extends StatefulWidget {
  const HomePage({super.key});

  @override
  State<HomePage> createState() => _HomePageState();
}

class _HomePageState extends State<HomePage> {
  @override
  Widget build(BuildContext context) {
    double scrW = MediaQuery.of(context).size.width;

    return Scaffold(
      appBar: AppBar(
        automaticallyImplyLeading: false,
        backgroundColor: Color.fromRGBO(195, 161, 162, 1.0),
        title: const Center(
            child: Text(
          '                HOME',
          style: TextStyle(color: Colors.white),
        )),
        actions: [
          GestureDetector(
            onTap: () {
              showModalBottomSheet(
                  shape: RoundedRectangleBorder(
                      borderRadius: BorderRadius.circular(0)),
                  context: context,
                  builder: (context) {
                    return Container(
                      height: 250,
                      width: scrW,
                      child: Column(
                        children: [
                          Container(
                            margin: EdgeInsets.symmetric(vertical: 10),
                            child: Text(
                              'Select House',
                              style: TextStyle(fontSize: 20),
                            ),
                          ),
                          // SizedBox(
                          //   height: 20,
                          // ),
                          Expanded(
                            child: Container(
                              margin: EdgeInsets.symmetric(vertical: 20),
                              // color: Colors.black,
                              child: Column(
                                mainAxisAlignment:
                                    MainAxisAlignment.spaceAround,
                                children: [
                                  Row(
                                    children: [
                                      Container(
                                        margin: EdgeInsets.symmetric(
                                            horizontal: 40),
                                        width: 20,
                                        height: 20,
                                        decoration: BoxDecoration(
                                            borderRadius:
                                                BorderRadius.circular(10),
                                            border: Border.all(width: .5),
                                            color: Colors.black),
                                      ),
                                      Text('House name')
                                    ],
                                  ),
                                  Row(
                                    children: [
                                      Container(
                                        margin: EdgeInsets.symmetric(
                                            horizontal: 40),
                                        width: 20,
                                        height: 20,
                                        decoration: BoxDecoration(
                                          borderRadius:
                                              BorderRadius.circular(10),
                                          border: Border.all(width: .5),
                                        ),
                                      ),
                                      Text('House name')
                                    ],
                                  ),
                                  Row(
                                    children: [
                                      Container(
                                        margin: EdgeInsets.symmetric(
                                            horizontal: 40),
                                        width: 20,
                                        height: 20,
                                        decoration: BoxDecoration(
                                          borderRadius:
                                              BorderRadius.circular(10),
                                          border: Border.all(width: .5),
                                        ),
                                      ),
                                      Text('House name')
                                    ],
                                  ),
                                ],
                              ),
                            ),
                          ),
                          SizedBox(
                            height: 50,
                          )
                        ],
                      ),
                    );
                  });
            },
            child: Text(
              'Switch houses',
              style: TextStyle(color: Colors.white),
            ),
          ),
        ],
      ),
      body: ListView(
        children: [
          Container(
            child: Column(
              children: [
                Container(
                  height: 150,
                  margin: EdgeInsets.all(10),
                  decoration: BoxDecoration(
                    border: Border.all(width: .5),
                    color: Colors.white,
                  ),
                  child: Container(
                    margin: EdgeInsets.all(5),
                    child: Column(
                      mainAxisAlignment: MainAxisAlignment.spaceBetween,
                      children: [
                        Row(
                          mainAxisAlignment: MainAxisAlignment.spaceBetween,
                          children: [
                            Text('Living room'),
                            Text('12 devices'),
                          ],
                        ),
                        Text('Living room background picture'),
                        Container(
                            alignment: AlignmentDirectional.topStart,
                            child: Text(
                                'Temperatyre:26℃  .humidity:60%rh  .light:120nits'))
                      ],
                    ),
                  ),
                ),
                Container(
                    margin: EdgeInsets.symmetric(horizontal: 30),
                    child: Column(
                      children: [
                        hanCell(),
                        hanCell(),
                        hanCell(),
                      ],
                    ))
              ],
            ),
          ),
        ],
      ),
    );
  }
}

class hanCell extends StatelessWidget {
  const hanCell({
    super.key,
  });

  @override
  Widget build(BuildContext context) {
    return const Row(
      children: [
        homeCell(),
        Expanded(flex: 1, child: SizedBox()),
        homeCell(),
      ],
    );
  }
}

class homeCell extends StatelessWidget {
  const homeCell({
    super.key,
  });

  @override
  Widget build(BuildContext context) {
    return Expanded(
      flex: 3,
      child: GestureDetector(
        onTap: () {
          Navigator.push(context, MaterialPageRoute(builder: (context) {
            return AirConditioningPage();
          }));
        },
        child: Container(
          margin: EdgeInsets.symmetric(vertical: 10),
          height: 180,
          decoration: BoxDecoration(
              border: Border.all(
                width: .5,
              ),
              borderRadius: BorderRadius.circular(15)),
          child: Column(
            children: [
              Expanded(
                  child: Container(
                decoration: BoxDecoration(
                    borderRadius: BorderRadius.circular(15),
                    color: Color.fromRGBO(213, 201, 201, 1.0)),
                child: Center(
                  child: Text('Device\n Image'),
                ),
              )),
              Expanded(
                  child: Container(
                child: Center(
                  child: Text('Device Name'),
                ),
              )),
            ],
          ),
        ),
      ),
    );
  }
}
